<template>
  <div>
     <el-form :model="model"  ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-row>
          <el-col :span="8">
            <el-form-item label="采购单编号" prop="Number">
              <el-input v-model="model.Number" placeholder="请选择供应商名称" :readonly="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="供应商" prop="VendorName">
              <el-input v-model="model.VendorName" placeholder="请选择供应商" :readonly="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="入库仓" prop="WarehouseId">
              <el-input v-model="model.WarehouseId" placeholder="请选择入库仓" :readonly="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="付款账户" prop="PaymentAccount">
              <el-input v-model="model.PaymentAccount" :readonly="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="付款方式" prop="PaymentCategory">
              <el-input v-model="model.PaymentCategory" :readonly="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="收款日期" prop="PaymentTime">
              <el-input v-model="model.PaymentTime" placeholder="付款日期" :readonly="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="退货日期" prop="ReturnDate">
              <el-input v-model="model.ReturnDate" placeholder="退货日期" :readonly="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="出库日期" prop="DeliveryDate">
              <el-input v-model="model.DeliveryDate" placeholder="出库日期" :readonly="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="采购状态" prop="Status">
              <el-tag type="info" v-if="model.Status == '0'">待审核</el-tag>
              <el-tag type="success" v-else-if="model.Status == '1'">已审核</el-tag>
              <el-tag type="danger" v-else-if="model.Status == '2'" >已退货</el-tag>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="联系人" prop="VendorContact">
              <el-input v-model="model.VendorContact"  placeholder="联系人" :readonly="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系人电话" prop="VendorContactTel">
              <el-input v-model="model.VendorContactTel"  placeholder="联系人电话" :readonly="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="备注" prop="Remark">
              <el-input v-model="model.Remark" :readonly="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
     </el-form>
     <div style="border: 1px solid #dcdfe6; padding: 10px;">
      <h1>明细</h1>
        <el-table :data="tableData" ref="dataForm" v-loading="isLoading" height="360">
          <el-table-column prop="ItemCode" label="编号" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="ItemName" label="名称" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="Count" label="数量" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="Price" label="商品单价" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="Amount" label="金额" :show-overflow-tooltip="true"></el-table-column>
        </el-table>
     </div>
  </div>
</template>

<script>
export default {
  props:{
    model:{
      require:true,
      type:Object,
    }
  },
  data(){
    return{
      tableData:[],
      isLoading:false,
    }
  },
  created(){
    console.log(this.model)
    this.GetOrderPoReturnItemsjId()
  },
  methods:{
    GetOrderPoReturnItemsjId(){
      this.isLoading=true;
      this.$http.get('/api/OrderPoReturn/GetOrderPoReturnId',{
                params:{
                    Id:this.model.Id,
                    WarehouseId:this.model.WarehouseId
                }
            })
            .then(res=>{
                this.isLoading=false;
                this.tableData = res.Data;
            })
    }
  }
}
</script>

<style>

</style>